<!--
 * @Author: licongwei
 * @Date: 2022-03-07 16:32:57
 * @Description: 总体情况
-->
<template>
  <div class="M1">
    <div class="left">
      <div class="box box1">
        <jbqk :adcode="adcode" ref="jbqkRef"></jbqk>
        <!-- <jbqk
          :adcode="adcode"
          @tableShow="tableShow = true"
          ref="jbqkRef"
        ></jbqk> -->
      </div>
      <div class="box box2">
        <sjbsqk :adcode="adcode" ref="sjbsqkRef"></sjbsqk>
      </div>
    </div>
    <div class="center">
      <c-map @change="handleAdcodeChange" ref="cMapRef"></c-map>
    </div>
    <div class="right">
      <div class="box box1">
        <yjyb :adcode="adcode" ref="yjybRef"></yjyb>
      </div>
      <div class="box box2">
        <yjjczxqk :adcode="adcode" ref="yjjczxqkRef"></yjjczxqk>
      </div>
      <div class="box box3">
        <sjbspm ref="sjbspmRef"></sjbspm>
      </div>
    </div>
    <div class="table" v-show="tableShow">
      <jbqk-table
        ref="jbqkTableRef"
        :tableData="tableData.list"
        @close="tableShow = false"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import httpRequest from '@/service'
import cMap from './cpns/map.vue'
import jbqk from './cpns/jbqk.vue'
import yjjczxqk from './cpns/yjjczxqk.vue'
import sjbspm from './cpns/sjbspm.vue'
import yjyb from './cpns/yjyb.vue'
import sjbsqk from './cpns/sjbsqk.vue'
import jbqkTable from './cpns/jbqkTable.vue'
interface IState {
  getData: () => void
}
interface TState {
  list: any[]
}
export default defineComponent({
  name: 'M1',
  components: {
    cMap,
    jbqk,
    yjjczxqk,
    sjbspm,
    yjyb,
    sjbsqk,
    jbqkTable
  },
  setup() {
    const store = useStore()
    const jbqkRef = ref()
    const sjbsqkRef = ref()
    const cMapRef = ref()
    const yjybRef = ref()
    const yjjczxqkRef = ref()
    const sjbspmRef = ref()
    const watchedState = computed(() => Object.values(store.state.globalDate))
    watch(watchedState, () => {
      jbqkRef.value?.refreshData()
      sjbsqkRef.value?.refreshData()
      cMapRef.value?.refreshData()
      yjybRef.value?.refreshData()
      yjjczxqkRef.value?.refreshData()
      sjbspmRef.value?.refreshData()
    })
    const tableData: TState = reactive({
      list: []
    })
    const tableShow = ref(false)
    const adcode = ref('650000')
    const handleAdcodeChange = (code: string) => {
      adcode.value = code
    }
    const tableState: IState = reactive({
      getData: () => {
        httpRequest
          .get({ url: 'M1JbpkTable' })
          .then((res) => {
            if (res.data) {
              tableData.list = res.data
            } else {
              tableData.list = [
                {
                  name: '食品类',
                  value: '粮、油、肉、蛋、菜、果、奶等重要民生商品。'
                },
                {
                  name: '生猪养殖类',
                  value: '生猪及养殖成本、饲料等。'
                },
                {
                  name: '生产资料类',
                  value:
                    '化肥、农药、农膜等农业生产资料;有色金属、建材等工业生产资料以及重点企生产资料类业基础原材料。'
                },
                {
                  name: '消费品和服务类',
                  value:
                    '烟酒、家用电器等主要消费品和交通、物业、水电气、通讯、医疗、教育、旅游、娱乐等服务。'
                },
                {
                  name: '特色农产品类',
                  value: '特色农产品类。'
                },
                {
                  name: '房地产类',
                  value: '土地出让、新建商品房、二手房等。'
                },
                {
                  name: '劳动力类',
                  value: '养殖业、饭店业、家政业、物业、仓储业等。'
                },
                {
                  name: '其他商品类',
                  value: '汽车、公路货运、供电、价格指数'
                }
              ]
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    tableState.getData()
    return {
      adcode,
      tableData,
      tableShow,
      handleAdcodeChange,
      jbqkRef,
      sjbsqkRef,
      cMapRef,
      yjybRef,
      yjjczxqkRef,
      sjbspmRef
    }
  }
})
</script>
<style lang="less" scoped>
.M1 {
  font-size: 30px;
  color: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  .box {
    overflow: hidden;
  }
  .left {
    flex: 0 0 465px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .box1 {
      flex: 1;
    }
    .box2 {
      flex: 0 0 220px;
      margin-top: 15px;
    }
  }
  .center {
    flex: 1;
  }
  .right {
    flex: 0 0 465px;
    display: flex;
    flex-direction: column;
    .box1 {
      flex: 0 0 170px;
    }
    .box2 {
      flex: 0 0 220px;
      margin: 15px 0;
    }
    .box3 {
      flex: 1;
    }
  }
  .table {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 1100px;
    height: 600px;
  }
}
</style>
